<template>
    <div class="contentInt">
        <img src="@/assets/images/contentInt_pic.png" alt="" class="left_pic" v-if="!isMobile">
        <div class="right_cont">
            <h2 class="title">About Matelink</h2>
            <h3 class="subTitle">Redefine intimate experiences through innovative AI technology, fulfilling every deep
                desire</h3>
            <p class="desc">We start this mission aim to redefine how we engage the relationship and enhance the sexual
                wellness without the restriction of location and time.</p>
            <p class="btn" @click="toBlogList">Learn More</p>
        </div>
        <img src="@/assets/images/contentInt_pic_m.png" alt="" class="left_pic" v-if="isMobile">
        <div class="sale">
            <p class="num">10%</p>
            <p class="type">OFF</p>
        </div>
    </div>
</template>
<script setup lang="ts">
import { getCurrentInstance } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()
const app = getCurrentInstance();
const isMobile = app?.appContext.config.globalProperties.$isMobile;
const toBlogList = () => {
    router.push({ name: 'blog' });
}
</script>
<style lang="scss" scoped>
.contentInt {
    padding: 120px 90px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;

    .left_pic {
        width: 860px;
        height: 637px;
    }

    .right_cont {
        width: 777px;

        .title {
            font-size: 40px;
            font-weight: 400;
            margin-bottom: 26px;
            line-height: 1;
        }

        .subTitle {
            line-height: 32px;
            font-size: 48px;
            font-weight: 700;
            line-height: 56px;
            margin-bottom: 40px;
        }

        .desc {
            font-size: 24px;
            font-weight: 400;
            line-height: 32px;
            margin-bottom: 28px;
        }

        .btn {
            width: 290px;
            height: 82px;
            font-size: 24px;
            font-weight: 400;
            line-height: 30px;
            background: #846FC1;
            color: #fff;
            cursor: pointer;
            border-radius: 16px;
            text-align: center;
            line-height: 82px;
        }
    }

    .sale {
        width: 146px;
        height: 146px;
        border-radius: 50%;
        background: radial-gradient(83.56% 83.56% at 19.86% -9.59%, #D9CCFF 0%, #846FC1 48%);
        position: absolute;
        bottom: 30%;
        right: 0;
        color: #fff;
        text-align: center;
        line-height: 1;
        box-sizing: border-box;
        padding-top: 30px;

        .num {
            font-size: 48px;
            font-weight: 700;
        }

        .type {
            font-size: 40px;
            font-weight: 400;
        }
    }
}
@media screen and (max-width: 750px) {
    .contentInt {
        padding: 0;
        flex-direction: column;
        align-items: center;

        .left_pic {
            width: 100%;
            height: auto;
        }

        .right_cont {
            width: 100%;
            padding: 0.9rem;

            .title {
                font-size: 0.4rem;
                margin-bottom: 0.26rem;
            }

            .subTitle {
                font-size: 0.48rem;
                margin-bottom: 0.28rem;
            }

            .desc {
                font-size: 0.24rem;
                margin-bottom: 0.28rem;
            }

            .btn {
                width: 2.2rem;
                height: 0.64rem;
                font-size: 0.2rem;
                line-height: 0.64rem;
            }
        }

        .sale {
            width: 1.46rem;
            height: 1.46rem;
            padding-top: 0.32rem;
            right: 0.2rem;
            bottom: 6rem;
            .num {
                font-size: 0.48rem;
            }
            .type{
                font-size: 0.4rem;
            }
        }
    }
    
}
</style>